# Introduction

The `SearchInput` component is a component that combines a `TextInput` with a search icon.
It works exactly the same as a `TextInput`.

# Basic example

```jsx
<SearchInput placeholder="Filter traits..." />
```

# Disabled

```jsx
<SearchInput disabled />
```

# Controlled usage

The `SearchInput` component works the same as using `input` directly.
Use `e.target.value` to get the value of the component on change.

```jsx
function ControlledSearchInputExample() {
  const [value, setValue] = React.useState(value)
  return <SearchInput onChange={(e) => setValue(e.target.value)} value={value} />
}
```
